import React, { Component } from 'react'
import "./homeNav.scss"
import "./popularMovies.scss"
import axios from "axios"
import { withRouter } from "react-router-dom"
import "./cinema.css"
import "./classic.css"


class homeNav extends Component {
  // ---------------------------state---------------------------
  state = {
    topRatedMovies: [],//最受好评电影
    movieList: [],//热映电影列表
    mostExpected: [],//最受期待电影
    comingMovieList: [],//待映电影列表
    comingMovieDate: [],//待映电影的日期
    cinema_nav : [
      { text:"全城", id:1},
      { text:"品牌", id:2},
      { text:"特色", id:3}
    ],
    cinema_con:[]
  }
  //点击激活对应选项卡，灭活其余选项卡
  handleTabItemClick = (index) => {
    var tabItem = document.querySelectorAll(".tabItem");
    var contentListItem = document.querySelectorAll(".contentListItem");
    var underline = document.querySelectorAll(".underline");
    var title = document.querySelectorAll(".title")

    for (var i = 0; i < tabItem.length; i++) {
      underline[i].style.display = 'none';
      contentListItem[i].style.display = "none"
      title[i].className = "title"
    }
    underline[index - 1].style.display = "block";
    contentListItem[index - 1].style.display = "block"
    title[index - 1].className = "title active"
  }
  //点击电影，跳转至购票详情页
  BuyTicket = (movieId) => {
    this.props.history.push("./pickCinema/" + movieId)
  }
  // ---------------------------componentDidMount---------------------------
  componentDidMount() {
    //默认显示第一个选项卡
    var tabItem = document.querySelectorAll(".tabItem");
    var contentListItem = document.querySelectorAll(".contentListItem");
    var underline = document.querySelectorAll(".underline");
    var title = document.querySelectorAll(".title")

    //默认激活导航第0个项，遍历第0个之后的项，不激活
    for (var i = 1; i < tabItem.length; i++) {
      underline[i].style.display = 'none';
      contentListItem[i].style.display = "none"
      title[i].className = "title"
    }
    //数组去重
    function unique(arr) {
      return Array.from(new Set(arr))
    }
    //请求最受好评的电影
    axios.get("ajax/topRatedMovies")
      .then(res => {
        this.setState({
          topRatedMovies: res.data
        })
      })
    //请求热映电影列表
    axios.get("ajax/movieOnInfoList")
      .then(res => {
        // console.log(res.data.movieList)
        this.setState({
          movieList: res.data.movieList
        })
      });
    //请求近期最受期待电影
    axios.get("ajax/mostExpected?ci=30&token=GPGTltZTr6--834mnlH7rJ6_ptUAAAAAkgsAAIwsBif-Pt16wmyF-4XBLnljabB-EuN8ecrV79FvIlF9wJ0WTFitXv861Fxb8C8TKQ")
      .then(res => {
        // console.log(res.data);
      });
    //请求待映电影列表

   
    axios.get(" /ajax/comingList?ci=30&token=KnM36IbIlT0V-q0DFmFiHMCcpdoAAAAAkgsAAIiz1a50lwCJ2LW9pvE81siHgg041vHKt-bXjNfj55VebbxNWlVYisyml8YbutxXxg&limit=10&optimus_uuid=AEAB8D10FBA711EAB126791A7FC61712257846C2894344AABD85E2A39C5F17EC&optimus_risk_level=71&optimus_code=10")
      .then(res => {
        //获取日期的数组
        var comingMovieDate = res.data.coming.map(v => {
          return v.comingTitle
        })
        this.setState({
          comingMovieList: res.data.coming,
          comingMovieDate: unique(comingMovieDate)
        });
      });
      //请求影院的数据
    axios.get('ajax/moreCinemas').then(res => {
      this.setState({
        cinema_con: JSON.parse(JSON.stringify(res.data))
      })
    });
    //请求经典电影列表
    axios.get('ajax/moreClassicList').then(res=>{
      this.setState({
          classic_con:res.data
      })
  })
  }
  // ------------------------------render-------------------------
  render() {
    return (
      <div className="maoYanHomeContainer">
        {/* 导航 */}
        <div className="navList">
          <div className="navListLeft">
            <span>深圳</span><i className="iconfont icon-xiasanjiaoxing"></i>
          </div>
          {/* 电影类别 */}
          <ul className="navListMiddle">
            <li className="tabItem" onClick={this.handleTabItemClick.bind(this, 1)}><span className="title active">热映</span><i className="underline"></i></li>
            <li className="tabItem" onClick={this.handleTabItemClick.bind(this, 2)}><span className="title active">影院</span><i className="underline"></i></li>
            <li className="tabItem" onClick={this.handleTabItemClick.bind(this, 3)}><span className="title active">待映</span><i className="underline"></i></li>
            <li className="tabItem" onClick={this.handleTabItemClick.bind(this, 4)}><span className="title active">经典电影</span><i className="underline"></i></li>
          </ul>
          <div className="navListRight"><i className="iconfont icon-sousuo"></i></div>
        </div>
        {/* 选项卡展示 */}
        <div className="contentList">
          {/* 热映 */}
          <div className="contentListItem">
            {/* 最受好评的电影 */}
            <div className="popularMovies">
              <div className="topRatedMovies" dangerouslySetInnerHTML={{ __html: this.state.topRatedMovies }}>
              </div>
            </div>
            {/* 热映的电影列表 */}
            <div className="movieList">
              {/* 电影条目 */}
              {
                this.state.movieList.map((v, i) =>
                  <div className="movieListItem" key={i}
                    onClick={this.BuyTicket.bind(this, v.id)}>
                    {/* 电影插图 */}
                    <div className="itemImg">
                      <img src={v.img.replace("/w.h", "")} alt="" />
                    </div>
                    {/* 电影信息 */}
                    <div className="itemInfo">
                      <div className="infoHeader">
                        <span className="movieName">{v.nm}</span>
                        {
                          v.version ?
                            <span className="version">
                              <span className="dimension">{v.version.slice(1, 3).toUpperCase()}</span>
                              <span className="ifIMax">{v.version.slice(4, 8).toUpperCase()}</span>
                            </span>
                            :
                            ""
                        }
                      </div>
                      <div className="wish"><span className="wishNum">{v.wish}</span> 人想看</div>
                      {
                        v.sc ?
                          <div className="score">观众评 <span className="scoreNum">{v.sc}</span></div>
                          :
                          ""
                      }
                      <div className="actor">主演：{v.star}</div>
                      <div className="play">{v.showInfo}</div>
                    </div>
                    {/* 购买按钮 */}
                    <div className="itemRight">
                      {
                        v.globalReleased ?
                          <div className="buy">购票</div>
                          :
                          <div className="preSell">预售</div>
                      }
                    </div>
                  </div>)
              }
            </div>
          </div>
          {/* 影院 */}
          <div className="contentListItem">
            <div className="cinema-con">
              <div className="cinema-con-nav">
                {
                  this.state.cinema_nav.map(v => {
                    return (
                      <div className="cinema-nav-item" key={v.id}>
                        {v.text}
                      </div>
                    )
                  })
                }
              </div>
              <div className="cinema-con-list" dangerouslySetInnerHTML={{ __html: this.state.cinema_con }}>
              </div>
            </div>
          </div>
          {/* 待映 */}
          <div className="contentListItem">
            {/* 最受好评的电影 */}
            <div className="popularMovies">
              <div className="topRatedMovies" dangerouslySetInnerHTML={{ __html: this.state.topRatedMovies }}>
              </div>
            </div>
            {/* 待映的电影列表 */}
            <div className="movieList">
              {this.state.comingMovieDate.map((date, i) =>
                <div key={i} >
                  <div
                    className="data"
                    style={{
                      width: "100%",
                      height: "0.8rem",
                      background: "white",
                      color: "#333",
                      textAlign: "left",
                      fontSize: "0.37rem",
                      padding: "12px 15px 0"
                    }}>
                    {date}
                  </div>
                  {
                    this.state.comingMovieList.map((v, i) =>
                      date === v.comingTitle ?
                        <div className="movieListItem" key={i}
                          onClick={this.BuyTicket.bind(this, v.id)}>
                          {/* 电影插图 */}
                          <div className="itemImg">
                            <img src={v.img.replace("/w.h", "")} alt="" />
                          </div>
                          {/* 电影信息 */}
                          <div className="itemInfo">
                            <div className="infoHeader">
                              <span className="movieName">{v.nm}</span>
                              {
                                v.version ?
                                  <span className="version">
                                    <i className="dimension">{v.version.slice(1, 3).toUpperCase()}</i>
                                    <i className="ifIMax">{v.version.slice(4, 8).toUpperCase()}</i>
                                  </span>
                                  :
                                  ""
                              }
                            </div>
                            <div className="wish"><span className="wishNum">{v.wish}</span> 人想看</div>
                            {
                              v.sc ?
                                <div className="score">观众评 <span className="scoreNum">{v.sc}</span></div>
                                :
                                ""
                            }
                            <div className="actor">主演：{v.star}</div>
                            <div className="play">{v.showInfo}</div>
                          </div>
                          {/* 购买按钮 */}
                          <div className="itemRight">
                            {
                              v.globalReleased ?
                                <div className="buy">购票</div>
                                :
                                <div className="preSell">预售</div>
                            }
                          </div>
                        </div>
                        :
                        "")
                  }
                </div>
              )}

            </div>
          </div>
          {/* 经典电影 */}
          <div className="contentListItem">
            <div className="Classic-con" dangerouslySetInnerHTML={{__html:this.state.classic_con}}>
                </div>
          </div>
        </div>
      </div >
    )
  }
}

export default withRouter(homeNav)